<script lang="ts" setup>
import { BonusLogs, apiBonusLogs } from "@@/api/module/pagingList";
import dayjs from "dayjs";
</script>

<template>
  <CpageView>
    <CrequestList
      :req-before="() => ({ type: 0 })"
      :api="apiBonusLogs"
      sticky="sticky"
      offset-top="0"
    >
      <template #header>
        <Cgrid col="3">
          <CgridItem justify="start">{{ $t("jin-e") }}</CgridItem>
          <CgridItem>{{ $t("shi-jian") }}</CgridItem>
          <CgridItem justify="end">{{ $t("bei-zhu") }}</CgridItem>
        </Cgrid>
      </template>
      <template #item="{ item }: { item: BonusLogs.ResItem }">
        <Cgrid col="3" class="list-item">
          <CgridItem class="C-M1" justify="start">{{ item.money }}</CgridItem>
          <CgridItem>
            {{ dayjs(item.created_at).format("MM/DD HH:mm") }}
          </CgridItem>
          <CgridItem justify="end">{{ item.remark }}</CgridItem>
        </Cgrid>
      </template>
    </CrequestList>
  </CpageView>
</template>

<style lang="less" scoped>
.list-item {
  border-bottom: 1rem solid var(--C-OT3);
  padding: var(--gap-md) 0;
}
</style>
